<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="/static/css/swiper.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/weui2.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/style.css"/>
    <script src="/static/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/picker.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/all.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style type="text/css">
    .swiper-wrapper a {
        color: #fff;
        line-height: 40px;
    }

    .time-active {
        background: red;
    }
</style>
<div id="content">
    <div class="topBox">
        <form name="form" method="post" class="form" >
            {{ form.csrf_token() }}
            <div class="top">
                <div class="sign"><img src="/static/img/timeMenu.png"/></div>
                <div class="title">
                    <p>时段菜品销售</p>
                </div>
            </div>
            <div class="scroll">
                <div class="data">
                    <input class="dataInput" type="text" value="{{ start_date }}" name="date_start" id='date_start'/>
                    <input class="dataInput" type="text" value="{{ end_date }}" name="date_end" id='date_end'/>
                </div>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide {% if time_num==30 %}time-active{% endif %}"><a
                                href="{{ set_url_param({'time_num':30}) }}">30分钟</a></div>
                        <div class="swiper-slide {% if time_num==60 %}time-active{% endif %}"><a
                                href="{{ set_url_param({'time_num':60}) }}">60分钟</a></div>
                        <div class="swiper-slide {% if time_num==120 %}time-active{% endif %}"><a
                                href="{{ set_url_param({'time_num':120}) }}">120分钟</a></div>
                        <div class="swiper-slide {% if time_num==360 %}time-active{% endif %}"><a
                                href="{{ set_url_param({'time_num':360}) }}">360分钟</a></div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="cont">
        <div class="core">
            <table class="main">
                <thead>
                <tr>
                    <th>时间段</th>
                    <th>菜品名称</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>总价</th>
                </tr>
                </thead>
                <tbody>
                {% for data in data_list %}
                    <tr>
                        <td>{{ data['时间区间'] }}</td>
                        <td>{{ data['菜品'] }}</td>
                        <td>{{ data['总量'] }}</td>
                        <td>¥ {{ data['总额'] /data['总量'] }}</td>
                        <td>¥ {{ data['总额'] }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript">
    //选择日期
    {#    $("#date").datetimePicker({title: "选择日期", m: 1});#}
    $("#date_start").datetimePicker({
        language: 'zh-CN',
        m: 1,
        autoclose: true,
        startDate: new Date()
    }).on("click", function () {
        $("#date_start").datetimePicker("setEndDate", $("#date_end").val())
    });
    $("#date_end").datetimePicker({
        m: 1,
        language: 'zh-CN',
        autoclose: true,
        startDate: new Date()
    }).on("click", function () {
        $("#date_end").datetimePicker("setStartDate", $("#date_start").val())
    });

    //swiper
    var swiper = new Swiper('.swiper-container', {
        autoplayDisableOnInteraction: false,
        paginationClickable: true,
        slidesPerView: 3,
        spaceBetween: 2,
        slidesPerGroup: 1,
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true //修改swiper的父元素时，自动初始化swiper
    });
    $(document).on("click", ".close-picker", function () {

        var start_date = $("#date_start").val();
        var end_date = $("#date_end").val();
        if (end_date && end_date >= start_date) {
             console.log(222);
            window.location.reload()
            location.href=location.href+"?start_date="+start_date+"&end_date="+end_date
        }

    })
</script>
</body>
</html>
